<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="container1" style="width: 900px;height: 500px;"></div>
	</body>

	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script type="text/javascript" src="ken-echarts-util.js"></script>
	<script>
		var data = {
			"legendData": ["速度"],
			"series": [{
				"animation": true,
				"animationDelay": 0,
				"animationDuration": 1000,
				"animationEasing": "cubicOut",
				"animationThreshold": 2000,
				"clockwise": true,
				"data": [{
					"name": "车速",
					"value": 40
				}],
				"detail": "",
				"endAngle": -45,
				"name": "王牌车速",
				"radius": "75%",
				"silent": false,
				"splitNumber": 10,
				"startAngle": 225,
				"type": "gauge"
			}],
			"xAxisData": ["车速"]
		};
		//参数放置比较少
		var option = createGaugeOption({
			title: '仪表图',
			series: data.series
		});
		//设置公共的样式或功能
		setExtraOption(option, "x", false, true, false, true);

		//修改或设置参数
		option.series[0].detail = {
			formatter: '{value}%'
		};

		var myChart = initEcharts("container1", option, true);

		setInterval(function() {
			option.series[0].data[0].value = (Math.random() * 100).toFixed(0) - 0;
			myChart.setOption(option, true);
		}, 2000);
	</script>
</html>
